<template>
  <view>
    <!-- 状态 -->
    <view class="statc">
      <view
        class="cu-load bg-blue loading"
        v-show="pageStatic==0?false:true"
      ></view>
      <view
        class="cu-load bg-red erro"
        v-show="pageStatic==2?false:true"
      ></view>
    </view>
    <!-- 顶部标题\分类 -->
    <view class="top" v-show="pageStatic==1?false:true">
      <view class="varied">
        <view>课程名称</view>
        <view>成绩</view>
        <view>学分</view>
      </view>
    </view>
    <!-- 数据
    <view class="cont" v-show="pageStatic==1?false:true">
      <view
        wx:for="{{shkiData}}"
        wx:key="tnane"
        class="animation-slide-bottom item {{index%2==0?'bg-grey':'bg-white'}} light"
        bindtap="showModal"
        data-target="courseDetails"
        data-info="{{item}}"
        style="animation-delay: {{(index+1)*0.1}}s;"
      >
        <view>{{ item.CName }}</view>
        <view>{{ item.Zpxs == null ? "暂无数据" : item.Zpxs }}</view>
        <view>{{ item.Xf }}</view>
      </view>
    </view>
 -->
    <!-- ColourUI 
    <view
      class="cu-modal {{modalName=='courseDetails'?'show':''}}"
      bindtap="hideModal"
    >
      <view class="cu-dialog" catchtap="true">
        <view class="cu-bar bg-white justify-end">
          <view class="content">课程详情</view>
        </view>
        <view class="padding-xl">
          <view id="info">
            <text>序号：{{ courseInfo.Courseid }}</text>
            <text>\n名称：{{ courseInfo.CName }}</text>
            <text>\n类型：{{ courseInfo.KcType }}</text>
            <text>\n学分：{{ courseInfo.Xf }}</text>
            <text>\n代码：{{ courseInfo.Courseno }}</text>
            <text>\n开课年级：{{ courseInfo.Grade }}</text>
          </view>
        </view>
      </view>
    </view>-->
  </view>
</template>

<script>
export default {
  data() {
    return {
        pageStatic: 0,
        courseInfo:{},
        modalName:'',
        shkiData:null
    };
  },

  mounted() {},

  methods: {
      showModal(e) {
		let courseInfo = {
			KcType: e.currentTarget.dataset.info.KcType,
			CName: e.currentTarget.dataset.info.CName,
			Xf: e.currentTarget.dataset.info.Xf,
			Courseid: e.currentTarget.dataset.info.Courseid,
			Courseno: e.currentTarget.dataset.info.Courseno,
			Grade: e.currentTarget.dataset.info.Grade,
		}
		console.log(courseInfo);
		this.courseInfo = courseInfo
		this.modalName = e.currentTarget.dataset.target
	},
    	hideModal(e) {
		this.modalName = null
	},
    getData(stuScoreDto) {
		guet.stuScoreUsingPOST(stuScoreDto, this.data.token)
			.then(resolve => {
				console.log(resolve.data.data);
				if (resolve.data.code == 200) {
                    //加载token
					this.shkiData = resolve.data.data
					this.pageStatic = 1
				} else {
					this.pageStatic = 2
				}
			}, reject => {
				this.pageStatic = 2
			})
	},
  },
};
</script>

<style lang="scss" scoped>
@toph:80rpx;
@allw:100%;
@fontsize:36rpx;
@itemh:80rpx;
.top {
	height: 80rpx;
	position: fixed;
	top: 0;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	width: 100%;
	border-top: 2rpx solid #cfcfcf;
	background-color: #84adfb;
	color: #ffffff;
	.varied {
		padding: 1vh;
		display: flex;
		justify-content: center;
		align-items: center;
		view {
			font-size: 36rpx;
			text-align: center;
			&:nth-child(1) {
				flex: 3;
			}
			&:nth-child(2) {
				flex: 2;
			}
			&:nth-child(3) {
				flex: 2;
			}
		}
	}
}

.cont {
	margin-top: 2 + 80rpx;
	.item {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// view {
		// 	overflow: hidden;
		// 	text-overflow: ellipsis;
		// 	display: -webkit-box;
		// 	-webkit-line-clamp: 2;
		// 	-webkit-box-orient: vertical;
		// 	min-height: 80rpx;
		// 	text-align: center;
		// 	flex: 1;
		// }
		view {
			text-align: center;
			&:nth-child(1) {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				flex: 3;
			}
			&:nth-child(2) {
				flex: 2;
			}
			&:nth-child(3) {
				flex: 2;
			}
		}
	}
}
.statc {
	margin-top: 2 + 80rpx;
}
#info {
	font-size: 28rpx;
	line-height: 62rpx;
	font-weight: weight;
	text-align: left;
}
</style>